@import 'src/style/mixin';

.confirmOrderContainer{
  padding-top: 1.95rem;
  padding-bottom: 3rem;
p, span{
  font-family: Helvetica Neue,Tahoma,Arial;
}
}
.container_style{
  background-color: #fff;
  margin-top: .4rem;
  padding: 0 .7rem;
}
.address_container{
  min-height: 3.5rem;
@include fj;
  align-items: center;
  padding: 0 0.6rem;
  background: url(../../images/address_bottom.png) left bottom repeat-x;
  background-color: #fff;
  background-size: auto .12rem;
.address_empty_left{
  display: flex;
  align-items: center;
.location_icon{
@include wh(.8rem, .8rem);
  fill: $blue;
  margin-right: .2rem;
}
.add_address{
@include sc(.7rem, #333);
}
.address_detail_container{
  margin-left: .2rem;
header{
@include sc(.65rem, #333);
span:nth-of-type(1){
  font-size: .8rem;
  font-weight: bold;
}
}
.address_detail{
  width: 100%;
  display: flex;
  align-items: center;
span{
@include sc(.5rem, #fff);
  border-radius: .15rem;
  background-color: #ff5722;
  height: .6rem;
  line-height: .6rem;
  padding: 0 .2rem;
  margin-right: .3rem;
}
p{
@include sc(.55rem, #777);
}
}
}
}
}
.address_empty_right{
@include wh(.6rem, .6rem);
  fill: #999;
}
.delivery_model{
  border-left: .2rem solid $blue;
  min-height: 4rem;
@include fj;
  align-items: center;
.deliver_text{
@include sc(.8rem, #333);
  font-weight: bold;
  padding-left: .3rem;
}
.deliver_time{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
p:nth-of-type(1){
@include sc(.7rem, $blue);
}
p:nth-of-type(2){
@include sc(.5rem, #fff);
  background-color: $blue;
  width: 2.4rem;
  margin-top: .5rem;
  text-align: center;
  border-radius: 0.12rem;
  padding: .1rem;
}
}
}
.pay_way{
.header_style{
@include fj;
  line-height: 2rem;
span:nth-of-type(1){
@include sc(.7rem, #666);
}
.more_type{
span:nth-of-type(1){
@include sc(.6rem, #aaa);
  width: 10rem;
  display: inline-block;
  text-align: right;
  vertical-align: middle;
}
svg{
@include wh(.5rem, .5rem);
  fill: #ccc;
}
}
}
.hongbo{
@include fj;
  border-top: 0.025rem solid #f5f5f5;
span{
@include sc(.6rem, #aaa);
  line-height: 2rem;
svg{
@include wh(.5rem, .5rem);
  vertical-align: middle;
  fill: #ccc;
}
}
span:nth-of-type(2){
  color: #aaa;
}
}
.support_is_available{
span{
  color: #666;
}
}
}
.food_list{
  background-color: #fff;
  margin-top: .4rem;
header{
  padding: .7rem;
  border-bottom: 0.025rem solid #f5f5f5;
img{
@include wh(1.2rem, 1.2rem);
  vertical-align: middle;
}
span{
@include sc(.8rem, #333);
}
}
.food_list_ul{
  padding-top: .5rem;
}
.food_item_style{
@include fj;
  line-height: 1.8rem;
  padding: 0 .7rem;
span,p{
@include sc(.65rem, #666);
}
.food_name{
  width: 11rem;
}
.num_price{
  flex: 1;
@include fj;
  align-items: center;
span:nth-of-type(1){
  color: #f60;
}
}
}
.total_price{
  border-top: 0.025rem solid #f5f5f5;
}
}
.confrim_order{
  display: flex;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 2rem;
p{
  line-height: 2rem;
@include sc(.75rem, #fff);
}
p:nth-of-type(1){
  background-color: #3c3c3c;
  flex: 5;
  padding-left: .7rem;
}
p:nth-of-type(2){
  flex: 2;
  background-color: #56d176;
  text-align: center;
}
}
.cover{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,.3);
  z-index: 203;
}
.choose_type_Container{
  min-height: 10rem;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 204;
header{
  background-color: #fafafa;
@include sc(.7rem, #333);
  text-align: center;
  line-height: 2rem;
}
ul{
li{
@include fj;
  padding: 0 .7rem;
  line-height: 2.5rem;
  align-items: center;
span{
@include sc(.7rem, #ccc);
}
svg{
@include wh(.8rem, .8rem);
  fill: #eee;
}
}
.choose{
span{
  color: #333;
}
svg{
  fill: #4cd964;
}
}
}
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .3s;
}
.fade-enter, .fade-leave-active {
  opacity: 0;
}
.slid_up-enter-active, .slid_up-leave-active {
  transition: all .3s;
}
.slid_up-enter, .slid_up-leave-active {
  transform: translate3d(0,10rem,0)
}
.router-slid-enter-active, .router-slid-leave-active {
  transition: all .4s;
}
.router-slid-enter, .router-slid-leave-active {
  transform: translate3d(2rem, 0, 0);
  opacity: 0;
}
